/*
 * @Author: xiaosihan 
 * @Date: 2024-08-04 22:13:07 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-06 22:58:32
 */


import userStore from "@views/userStore";
import { Button, Table, Tooltip } from "antd";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import icon4PNG from "../img/icon4.png";
import styles from "./joiner.module.less";
import ShareModal from "./ShareModal/ShareModal";
import shareModalStore from "./ShareModal/shareModalStore";
import joinerStore from "./joinerStore";

interface Iprops {
    modelId: string
}

// 成员
export default function Jooiner(props: Iprops) {

    const [list, setList] = useState(joinerStore.list);
    const [page, setPage] = useState(joinerStore.page);
    const [totalCount, setTotalCount] = useState(joinerStore.totalCount);

    useEffect(() => {
        if (props.modelId) {
            joinerStore.setModelId(props.modelId);
        }
    }, []);

    useEffect(() => autorun(() => {
        setList(joinerStore.list);
        setPage(joinerStore.page);
        setTotalCount(joinerStore.totalCount);
    }), []);

    const dataSource: any[] = [];
    list.map(l => {
        dataSource.push({
            key: l.id,
            id: l.id,
            name: l.userName,
            userId: l.userId,
        });
    });

    const columns = [
        {
            title: '成员名称',
            align: "center",
            dataIndex: 'name',
            key: 'name',
            render(name: string) {
                return name;
            }
        },
        {
            title: '角色',
            align: "center",
            dataIndex: 'userId',
            key: 'userId',
            render(userId: string) {
                return (userId === userStore.userId) ? "创建者" : "参与者";
            }
        },
        {
            title: '操作',
            align: "center",
            dataIndex: 'data',
            key: 'operate',
            render(statu: string, p: any) {
                return (
                    <div className={styles.operate} >
                        <Tooltip
                            rootClassName={styles.delete_tip}
                            placement="right"
                            mouseEnterDelay={0}
                            trigger={["click"]}
                            title={
                                <Button
                                    danger
                                    type="primary"
                                    size="small"
                                    onClick={async () => {
                                        joinerStore.delete(p.id);
                                    }}
                                >确认删除</Button>
                            }
                        >
                            <img className={styles.icon} src={icon4PNG} alt="" />
                        </Tooltip>

                    </div>
                );
            }
        }
    ]

    return (
        <div className={styles.joiner} >

            <div className={styles.header} >
                <span className={styles.title} >所有成员</span>
                <Button
                    className={styles.share}
                    type="primary"
                    onClick={() => {
                        shareModalStore.setShow(true);
                        shareModalStore.getShareToken(props.modelId);
                    }}
                >分享链接</Button>
            </div>

            {/* 分享链接弹窗 */}
            <ShareModal modelId={props.modelId} />

            <Table
                size="small"
                dataSource={dataSource}
                columns={columns as any}
                pagination={{
                    current: page,
                    total: totalCount,
                    pageSize: 10,
                    onChange: (page: number, pageSize: number) => {
                        joinerStore.setPage(page);
                    }
                }}
            />

        </div>
    );

}